<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 1. 文档编码 -->
  <meta charset="UTF-8">
  <title>元数据标签演示</title>

  <!-- 2. 视口（移动端适配） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. 页面简介（SEO） -->
  <meta name="description"
        content="一份涵盖 charset、viewport、robots、theme-color 等全部常用 meta 标签的完整示例，适合前端入门与面试复习。">

  <!-- 4. 关键词（SEO） -->
  <meta name="keywords" content="HTML,meta,viewport,SEO,theme-color,前端">

  <!-- 5. 作者 -->
  <meta name="author" content="张三">

  <!-- 6. 版权 -->
  <meta name="copyright" content="© 2024 张三">

  <!-- 7. 爬虫指令 -->
  <meta name="robots" content="index,follow">

  <!-- 8. 搜索引擎抓取周期 -->
  <meta name="revisit-after" content="7 days">

  <!-- 9. 禁止自动转码（百度） -->
  <meta http-equiv="Cache-Control" content="no-transform">

  <!-- 10. 主题色（PWA/Chrome 地址栏） -->
  <meta name="theme-color" content="#2f54eb">

  <!-- 11. 添加到主屏幕时的名称 -->
  <meta name="apple-mobile-web-app-title" content="MetaDemo">
  <meta name="application-name" content="MetaDemo">

  <!-- 12. 状态栏样式（iOS） -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <!-- 13. 强制 IE 使用最新引擎 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- 14. 页面缓存过期时间 -->
  <meta http-equiv="expires" content="Wed, 09 Oct 2025 00:00:00 GMT">

  <!-- 15. 简单的内部样式，方便截图 -->
  <style>
    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:#f5f7fa;color:#333;line-height:1.6;padding:2rem}
    h1{color:#2f54eb;margin-bottom:1rem}
    table{width:100%;border-collapse:collapse;margin-top:1rem}
    th,td{padding:.75rem 1rem;border:1px solid #e0e0e0}
    th{background:#fafafa;font-weight:600}
    tr:nth-child(even){background:#fafbfc}
  </style>
</head>

<body>
  <h1>HTML 元数据标签（meta）演示页</h1>

  <p>下表把本页用到的所有 <code>&lt;meta&gt;</code> 标签逐条列出，方便对照源码查看含义与作用。</p>

  <table>
    <thead>
      <tr>
        <th>标签</th>
        <th>作用/含义</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>&lt;meta charset="UTF-8"&gt;</code></td>
        <td>声明文档字符编码为 UTF-8，避免中文乱码</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="viewport"&gt;</code></td>
        <td>让移动端浏览器按设备宽度渲染，禁止默认缩放</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="description"&gt;</code></td>
        <td>页面简介，搜索引擎快照中可见，影响点击率</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="keywords"&gt;</code></td>
        <td>关键词列表，过去 SEO 权重高，现已降权，但仍建议写</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="author"&gt;</code></td>
        <td>作者署名，方便联系或版权追溯</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="copyright"&gt;</code></td>
        <td>版权信息，可填写公司或个人名称+年份</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="robots"&gt;</code></td>
        <td>告诉爬虫是否索引(index)或跟踪链接(follow)</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="revisit-after"&gt;</code></td>
        <td>建议搜索引擎多少天后再次抓取</td>
      </tr>
      <tr>
        <td><code>&lt;meta http-equiv="Cache-Control" content="no-transform"&gt;</code></td>
        <td>禁止百度/搜狗等转码，保持原样式</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="theme-color"&gt;</code></td>
        <td>定义 PWA 地址栏主题色，Chrome/Safari 均支持</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="apple-mobile-web-app-title"&gt;</code></td>
        <td>iOS 添加到主屏时的短标题</td>
      </tr>
      <tr>
        <td><code>&lt;meta name="apple-mobile-web-app-status-bar-style"&gt;</code></td>
        <td>控制 iOS 状态栏颜色（黑/白/透明）</td>
      </tr>
      <tr>
        <td><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;</code></td>
        <td>强制 IE 使用最新渲染引擎，避免兼容模式</td>
      </tr>
      <tr>
        <td><code>&lt;meta http-equiv="expires"&gt;</code></td>
        <td>告诉浏览器该文档过期时间，过期后重新向服务器请求</td>
      </tr>
    </tbody>
  </table>

  <p>打开浏览器「开发者工具 → Elements」即可看到上述 meta 标签已全部注入 &lt;head&gt;。</p>
</body>
</html>